<template>
	<view class="main"> 
		<view class="address">
			<view class="address-head flex al-item ju-cont">
				<view class="address-head-left">存储地址</view>
				<view class="address-head-right flex al-item">
					<text class="u-line-1" style="width: 150rpx;">{{userInfo.account_address}}</text>
					<image @click="copy" src="@/static/ico/pay-copy.png" mode=""></image>
				</view>
			</view>
			<view class="address-des">由平台代理创建的地址，可帮您存储数字藏品、完成链上寄售</view>
		</view>
		<view class="goods" v-if="goods.id">
			<view class="goods-title">商品详情</view>
			<view class="goods-cont flex al-item">
				<view class="goods-cont-img">
					<image :src="goods.thumb" mode="aspectFill"></image>
				</view>
				<view class="goods-cont-info">
					<view class="goods-cont-info-title u-line-1">{{goods.title}}</view>
					<!-- <view class="goods-cont-info-des u-line-1">{{goods.user_name}}</view> -->
					<view class="goods-cont-info-price u-line-1">¥{{goods.price}}</view>
				</view>
			</view>
			<!-- <view class="pay-price">
				支付金额<text>￥{{goods.price}}</text>
			</view> -->
			<view class="goods-title">支付方式</view>
			<view class="pay-type">
				<view class="pay-type-1" :class="{ active: paytype === 'wechat' }" @click="payTypeClick('wechat')">
					<u-icon name="../../static/ico/yue_icon.png" size="20"></u-icon>
					使用银行卡支付
				</view>
				<view class="pay-type-2" :class="{ active: paytype === 'money' }" @click="payTypeClick('money')">
					<u-icon name="../../static/images/logo_icon.png" size="20"></u-icon>
					余额支付( {{ (userMay*1).toFixed(2) }} )
				</view>
			</view>
		</view>
		
		<view v-if="false" class="pay-type">
			<u-radio-group v-model="paytype" placement="column" :multiple="false">
			    <view class="pay-type-item flex al-item ju-cont" @click="payTypeClick('wechat')">
					<view class="pay-type-item-left flex al-item">
						<image src="../../static/ico/wechat.png" mode="aspectFill"></image>
						<view class="pay-type-item-left-info">
							<view class="pay-type-item-left-info-title">疯传数藏</view>
							<view class="pay-type-item-left-info-des">选择疯传数藏钱包支付</view>
						</view>
					</view>
					<u-radio name="wechat"></u-radio>
				</view>
				<view class="pay-type-item flex al-item ju-cont" @click="payTypeClick('money')">
					<view class="pay-type-item-left flex al-item">
						<image src="@/static/images/logo.png" mode=""></image>
						<view class="pay-type-item-left-info">
							<view class="pay-type-item-left-info-title">余额(￥{{(userMay*1).toFixed(2)}})</view>
							<view class="pay-type-item-left-info-des">选择余额支付</view>
						</view>
					</view>
					<u-radio name="money"></u-radio>
				</view>
			    
			</u-radio-group>
			
		</view>
		<view class="notice">
			<view class="notice-title">购买须知</view>
			<view class="notice-des" v-html="purchase.value"></view>
			<view class="address-des red">注意：您1小时只能取消3次订单，超出次数将限购1小时</view>
		</view>
		<view class="pay">
			<view class="savepadding savebottom" style="height: 214rpx;"></view>
			<view class="pay-nav savepadding savebottom">
				<!-- <view class="pay-nav-pact flex al-item">
					<u-checkbox-group @change="pact=!pact">
						<u-checkbox :checked="pact" :size="12" label="点击确认支付则视为同意"></u-checkbox>
					</u-checkbox-group>
					<text @click="show=true">《{{agreement.title}}》</text>
					<text style="margin-left: 20rpx;" @click="show2=true">《反洗钱承诺书》</text>
				</view> -->
				<view class="footer">
					<view class="footer-price">
						<view class="rmb">￥</view>
						<view class="price">{{(goods.price*number).toFixed(2) }}</view>
					</view>
					<view class="">
						<u-button type="primary" :plain="true" :loading="loading" v-if="paytype=='money'" @click="topaw">
							<block>
								<text>确认支付</text>
								<text style="font-size: 30rpx;font-weight: 600;">→</text>
							</block>
						</u-button>
						<u-button :loading="loading" type="primary" :plain="true" v-else @click="purchaseGoods">
							<text>确认支付</text>
							<text style="font-size: 30rpx;font-weight: 600;">→</text>
						</u-button>
					</view>
				</view>
				<!-- <u-button :loading="loading" v-if="paytype=='money'" type="default" @click="topaw">确认支付￥{{goods.price}}</u-button>
				<u-button :loading="loading" v-else type="default" @click="purchaseGoods">确认支付￥{{goods.price}}</u-button> -->
			</view>
		</view>
		
		<!-- 数字交易服务协议 -->
		<u-popup bgColor="transparent" round="32rpx" :show="show" @close="close">
		    <view class="draw-lots-main-popup savepadding savebottom">
		        <view class="header flex al-item ju-cont">
					<view class="header-title">
						{{agreement.title}}
					</view>
					<view class="header-close">
						<u-icon @click="close" name="close" color="#999999" size="22"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list">
					<view class="pay-pact" v-html="agreement.value"></view>
				</scroll-view>
				<button @click="pact=true,show=false">我已阅读并同意</button>
		    </view>
		</u-popup>
		
		<!-- 反洗钱承诺书 -->
		<u-popup bgColor="transparent" round="32rpx" :show="show2" @close="close">
			<view class="draw-lots-main-popup savepadding savebottom">
				<view class="header flex al-item ju-cont">
					<view class="header-title">
						反洗钱承诺书
					</view>
					<view class="header-close">
						<u-icon @click="show2 = false" name="close" color="#999999" size="22"></u-icon>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list">
					<view class="pay-pact">
						当您选择注册疯传数藏平台账户及使用疯传数藏平台提供的服务时，疯传数藏平台向您进行反洗钱告知及警示，您默认无条件遵守本《反洗钱承诺书》。您需对在疯传数藏平台使用的资金的合法性进行保证承诺。<br>
						一、根据《中华人民共和国刑法》及《中华人民共和国反洗钱法》规定，“洗钱”是指将违法所得及其产生的收益，通过各种手段掩饰、隐瞒其来源和性质，使其在形式上合法化的行为。因此当您成为疯传数藏平台用户且进行任何交易时，您须保证并承诺如下: <br>
						&nbsp;&nbsp; 1、用户承诺其资金为合法、安全的自有资金，不存在不诚实经营、诈骗资金等违法经营行为所得或盗窃、毒品交易、黑社会组织性质不法行为、受贿、侵占挪用公司财产等犯罪行为所得，不存在通过疯传数藏平台进行洗钱行为来掩饰其资金非法来源，获取不法收益的行为。<br>
						&nbsp;&nbsp; 2、用户承诺不得将其在疯传数藏平台所得收益用作任何反党、反国家等违法犯罪活动，或将资金及收益支持、资助或变相帮助反党、反国家、恐怖组织用于非法活动。<br>
						二、疯传数藏平台对于用户施行实名注册严格准入制度，对于通过实名注册用户，疯传数藏在其交易行为发生时进行客户身份甄别，严格审核，有权拒绝对身份不明的用户或涉嫌洗钱可疑交易的用户提供任何服务。<br>
						三、对于发生交易行为的用户，疯传数藏平台按规定完整登记用户相关信息，审慎保存并实时监管，对用户的账户和相关动态持续关注，如用户信息发生变更、交易中经审查涉嫌洗钱犯罪、公安检察院法院等司法机关及有关部门要求协查等情况发生时，疯传数藏平台将对用户上述账户及个人信息进行重新识别，对于上述用户已发生交易保存的相关文件、资金凭证及其他交易资料进行重新审核或协助司法机关或有权监管部门查证。<br>
						四、对于用户交易过程中存在交易异常行为(包括但不限于某--时间段内频繁进行资金出借及资金划拨操作)或大额可疑交易行为时(包括用户某期、某次金额畸高，用户金额呈现异常比例波动)，疯传数藏平台发现该等行为后立即向用户以合理方式进行询问并要求用户对上述交易行为作出合理性解释，疯传数藏可根据情况要求用户提供相关资料证明或向银行、同业机构调取用户近期资金往来明细及交易记录以核实用户的异常交易、可疑大额交易是否涉及洗钱及其他违规违法交易。用户不得以任何理由拒绝对该等异常交易行为进行解释、说明。<br>
						五、如疯传数藏平台在交易过程中发现或在第三方金融或同业机构中已确认用户涉及洗钱犯罪、资金或其他财产来源于恐怖组织、恐怖分子、从事恐怖融资活动人员及其他违法犯罪所得;资金或其他形式的财产已用于或将用于恐怖融资、恐怖活动等违法犯罪活动时，疯传数藏将立即停止该用户在平台已发生或正发生的所有交易，将其自有资金、授权在银行存管资金及出借相关收益采取查封账户、冻结款项措施，并将用户违法行为报送指定金融监管部门并视情况将交易违法信息及证据材料移交司法机关处理。由于用户未依照相关法律法规的要求及违反本文件中第一条已作出的相关保证性承诺导致疯传数藏或其他第三方遭受相应损失，用户应承担完全的赔偿责任并单独承担相应法律后果。
					</view>
				</scroll-view>
				<button @click="show2=false">我已阅读并同意</button>
			</view>
		</u-popup>
		
		<u-popup
		:show="pwd_show" 
		overlayOpacity="0.8"
		mode="center" 
		@close="pwd_show=false,password=''">
		    <!-- <view class="material">
		        <view class="pwd-header">
					<view class="material-header-close" @click="pwd_show=false,password=''">
						<u-icon name="close" color="#BFBFCA" size="18"></u-icon>
					</view>
				</view>
				<view class="pwd-header-title">请输入交易密码</view>
				<view class="material-cont pwd-cont">
					<PasswordInput v-model="password" @confirm="confirmPwd"></PasswordInput>
				</view>
		    </view> -->
			<view class="transaction">
				 <view class="transaction-text">
					<text>请输入交易密码</text>
				 </view>
				 <view class="transaction-input">
					<u-code-input :focus="true" @finish="confirmPwd"  size="44" dot v-model="password" mode="box" :space="0" :maxlength="6" hairline></u-code-input>
				 </view>
			</view>
		</u-popup>
		<u-modal :show="tshow" @confirm="GoPle" asyncClose content="您还未设置交易密码？" @cancel="tshow=false" title="提示" cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去设置" show-cancel-button></u-modal>
			<u-modal :show="ttshow" @confirm="GoPle" asyncClose content="开通钱包后才可以使用余额支付" @cancel="ttshow=false"
				cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去开通" show-cancel-button></u-modal>
				<u-modal :show="yshow" @confirm="goChongzhi" asyncClose content="钱包余额不足请充值后继续交易" @cancel="yshow=false"
					cancelColor="#A2A2A2" confirmColor="#00000" confirm-text="去充值" show-cancel-button></u-modal>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	import PasswordInput from "@/components/PasswordInput.vue"
	export default {
		mixins:[mixin],
		components:{PasswordInput},
		data() {
			return {
				loading:false,
				number:1,
				paytype:'wechat',
				pact:true,
				show:false,
				show2: false,
				goods:{},
				purchase:{},
				options:{},
				agreement:{},
				userMay:0,
				tshow:false,
				ttshow: false,
				yshow: false,
				password:'',
				pwd_show:false,
				buy_passwd:false,
				dxStatus: false,
				wallet_status: 0
			}
		},
		onLoad(e) {
			console.log('[参数]',e)
			this.appInfoFunc()
			this.options = e
			if(this.options.token){
				// console.log()
				this.paytype = e.paytype
			}
		},
		onShow() {
			if(this.options.type==2){
				this.collectionInfo(this.options.order_id,'blind_box')
			}else{
				this.collectionInfo(this.options.id,'goods')
			}
			
			if(this.options.type==8){
				this.getPurchase('drawing_agreement')
				// this.getPurchase('drawing_instructions')
			}else{
				this.getPurchase('purchase_instructions')
			}
			this.getUser()
			this.transaction_service_agreement()
		},
		computed: {
			...mapState(['userInfo','token']),
			max(){
				return this.goods?.rule_draw_count-this.goods?.person_draw_all_count||0
			}
		},
		methods: {
			async appInfoFunc(){
			 let res = await this.$http({
			 	url: this.$api.appInfo,
			 	method: 'get',
			 	hideLoading: true,
			 	needToken: true,
			 	data: {}
			 })
			 this.dxStatus = res.data.DX
			 
			},
			async getUser(){
				let res = await this.$http({
					url:this.$api.getUser,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{}
				})
				if(res.code==200){
				this.userMay=res.data.money
				this.wallet_status = res.data.wallet_status
				this.buy_passwd=res.data.buy_passwd?true:false
				}
			},
			GoPle(){
				this.tshow=false
				uni.navigateTo({
					url:'/pages/save/editpwd'
				})
			},
			goChongzhi () {
				this.yshow = false
				uni.navigateTo({
					url: '/pages/wallet/recharge'
				})
			},
			async topaw(){
				if (!Boolean(this.wallet_status)) {
					this.ttshow = true
					return
				}
				if(this.max<1&&this.goods.type==8){
					uni.$u.toast('您的购买次数已用完')
					return
				}
				if(!this.pact){
					uni.$u.toast('请先勾选协议')
					return
				}
				if (!this.options.token && this.dxStatus) {
					uni.navigateTo({
						url: '/subpage/codeWebview/codeWebview?id=' + this.options.id+'&order_id='+this.options.order_id+'&type='+this.options.type+'&paytype='+this.paytype
					})
					return
				}
				// console.log(this.userMay,this.goods.price,this.userMay>=this.goods.price);
				if(this.userMay-this.goods.price>=0){
					if(this.buy_passwd){
						this.password=''
						this.pwd_show=true
					}else{
							this.tshow=true
					}
				}else{
					this.yshow = true
					// uni.$u.toast('您的余额不足')
					// if (!this.options.token) {
					// 	uni.navigateTo({
					// 		url: '/subpage/codeWebview/codeWebview?id=' + this.options.id
					// 	})
					// }
				}
			},
			confirmPwd(){
				this.pwd_show=false
				this.submit()
			},
			async submit(){
				if(this.max<1&&this.goods.type==8){
					uni.$u.toast('您的购买次数已用完')
					return
				}
				if(!this.pact){
					uni.$u.toast('请先勾选协议')
					return
				}
				if (!this.options.token && this.dxStatus ) {
					uni.navigateTo({
						url: '/subpage/codeWebview/codeWebview?id=' + this.options.id+'&order_id='+this.options.order_id+'&type='+this.options.type+'&paytype='+this.paytype
					})
					return
				}
				this.loading = true
				
				try{
					let res = await this.$http({
						url:this.$api.createResaleOrder,
						method: 'POST',
						hideLoading: true,
						needToken:true,
						data:{
							id:this.options.type==2?this.options.order_id:this.options.id,
							pay_type:this.paytype,
							order_type:this.goods.order_type,
							password:this.password,
							dx: this.options.token || 1234,
						}
					})
					this.loading = false
					// console.log('[藏品详情]',data)
					if(res.code == 200){
						uni.showToast({
							title: '支付成功，等待审核中',
							duration: 2000,
							icon:'none'
						});	
						uni.navigateTo({
							url:'/pages/Order/index'
						});
					}else{
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				}catch(e){
					//TODO handle the exception
					this.options.token = ''
				}
				this.options.token = ''
			},
			copy(){
				uni.setClipboardData({
					data: this.userInfo.account_address,
					showToast: false,
					success: () => {
						console.log('success');
						this.$u.toast('内容已复制到剪切板')
					}
				});
			},
			//生成订单
			async purchaseGoods(){				
				if(!this.pact){
					uni.$u.toast('请先勾选协议')
					return
				}
				if(!this.goods.price){
					uni.$u.toast('藏品价格为0，无法购买')
					return
				}
				if (!this.options.token && this.dxStatus) {
					uni.navigateTo({
						url: '/subpage/codeWebview/codeWebview?id=' + this.options.id +'&order_id='+this.options.order_id+'&type='+this.options.type+'&paytype='+this.paytype
					})
					return
				}
				this.loading = true
				let res = await this.$http({
					url:this.$api.createResaleOrder,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						id:this.options.type==2?this.options.order_id:this.options.id,
						pay_type:this.paytype,
						order_type:this.goods.order_type,
						password:this.password,
						dx: this.options.token || 1234,
					}
				})
				this.loading = false
				console.log('[生成订单]',JSON.stringify(res))
				if(res.code == 200){
					let id=res.data.id
					if(id){this.topay(id)}else{
						uni.showToast({
							title: '支付失败',
							duration: 2000,
							icon:'none'
						});
					}
					// uni.request({
					// 	url:"https://pay.zyrnft.com/v1/payOrder",//payorder,
					// 	method: 'GET',
					// 	data:{
					// 		id:res.data.id
					// 	},
					// success: (response) => {
					// 	console.log('请求支付后返回的数据：', response);
					// 	let id=response.data.data.id
					// 	if(id){this.topay(id)}else{
					// 		uni.showToast({
					// 			title: '支付失败',
					// 			duration: 2000,
					// 			icon:'none'
					// 		});
					// 	}
					// 		// uni.redirectTo({
					// 		// 	url:'/subpage/webview/webview?weburl='+response.data.data.body
					// 		// });
					// 	},
					// 	fail: (err) => {
					// 			console.log('支付失败：', err);
					// 	},
					// 	complete: (com) => {
					// 		this.loading = false;
					// 	}
					// });
				}else{
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon:'none'
					});
				}
				// let param = {
				// 	"charset":"utf-8",
				// 	"signType":"01",
				// 	"data":'{"head":{"version":"1.0","method":"sandPay.fastPay.quickPay.index","productId":"00000016","accessType":"1","mid":"6888803043479","plMid":"","channelType":"07","reqTime":"20220514110736"},"body":{"userId":194,"orderCode":"E5125258006432002022051252481029","totalAmount":"000009999900","subject":"special","body":"\\u6570\\u5b57\\u85cf\\u54c1","extend":"special","orderTime":"20220514110736","currencyCode":156,"notifyUrl":"https:\/\/zyr1.xingrunkeji.cn\/notify","frontUrl":"https://zyr1.xingrunkeji.cn/payorder"}}',
				// 	"sign":"WGOYLw7Njef+SiKuO+z2NKYygrNC6rtULcT7QbWTRzRs+u7KyMsBUX92/C+OCjSPkL33PqmLq/9M8j6lJd5mOZl4xk86DcfX56kOGjB25f3h6LpL+q9IhsZSJvnSrwpP1mwT5udVuQ6AxZGHzqQai7F1iyJPfQbQ6tnZbNfUOH0RTCUNDm3g7pCEIsQuwJ9d6hWfz1VLTFe6w9XnsA3Qv4rMjzZcBZ2qBOsPdXd7EF9vcOoF0R1mieX6hb9oAGoUK9NLsIbQbE0SAGGDH1xJXQr9BXWbvTwCIqb9L/LD5qHNOQRxqzA+pma1Rft6qWCGpYxTn2obH54aGVCBkyDX5w==",
				// };
				// uni.request({
				// 	url: 'https://cashier.sandpay.com.cn/fastPay/quickPay/index',
				// 	    data: param,
				// 	    method: 'POST',
				// 	    header: {
				// 	        'Content-Type': 'application/x-www-form-urlencoded'
				// 	    },
				// 	    dataType: 'json',
				// 	    success: (response) => {
				// 	        console.log('请求登录后返回的数据：', response);
				// 	    },
				// 	    fail: (err) => {
				// 	        console.log('登录失败：', err);
				// 	    },
				// 	    complete: (com) => {
				// 	        console.log('请求登录结束：', com);
				// 	    }
				// })
			},
			//整体藏品详情
			async collectionInfo(id,order_type){
				let data = await this.$http({
					url:this.$api.resaleInfo,
					method: 'GET',
					hideLoading: true,
					data:{
						id:id,
						order_type
					}
				})
				if(data.code == 200){
					this.goods = data.data
					
				}
			},
			//购买须知
			async getPurchase(e){
				let data = await this.getConfigDetail(e)
				if(data.code == 200){
					this.purchase = data.data
				}
			},
			//购买协议
			async transaction_service_agreement(){
				let data = await this.getConfigDetail('transaction_service_agreement')
				if(data.code == 200){
					this.agreement = data.data
				}
			},
			payTypeClick(e){
				if(!this.loading){
					this.paytype = e
				}
				
			},
			close(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		// background-color: $nft-page-bg-color;
		background: #F7F8FA;
		.flex{
			display: flex;
		}
		.al-item{
			align-items: center;
		}
		.ju-cont{
			justify-content: space-between;
		}
		.address{
			padding: 24rpx 28rpx;
			border-bottom: 1rpx solid #f8f8f8;
			background-color: #fff;
			&-head{
				color: #333;
				&-left{
					font-size: 32rpx;
					font-weight: 600;
					line-height: 40rpx;
					color: #16172F;
				}
				&-right{
					font-size: 24rpx;
					color: #8C93AA;
					image{
						width: 32rpx;
						height: 30rpx;
					}
				}
			}
			&-des{
				margin-top: 24rpx;
				padding: 16rpx 12rpx;
				background: #F7F8FA;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #8C93AA;
				line-height: 34rpx;
			}
		}
		.red{
			// margin: 28rpx;
			// padding: 16rpx 12rpx;
			// background: #F8F8F8;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #FF6A6A;
			line-height: 34rpx;
			margin-top: 0;
		}
		.goods{
			padding: 28rpx 28rpx 40rpx 28rpx;
			border-bottom: 1rpx solid #f8f8f8;
			background: #fff;
			margin-top: 20rpx;
			&-title {
				color: #16172F;
				font-size: 32rpx;
				font-weight: 600;
			}
			&-cont{
				padding: 28rpx 0;
				&-img{
					width: 160rpx;
					height: 160rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
				&-info{
					margin-left: 26rpx;
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					&-title{
						color: #000;
					}
					&-des{
						color: #999999;
						margin-top: 10rpx;
					}
					&-price{
						margin-top: 28rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #000;
						line-height: 30rpx;
					}
				}
			}
			.pay-price{
				text-align: right;
				font-size: 26rpx;
				font-weight: 600;
				color: #666666;
				line-height: 36rpx;
				text{
					font-weight: 600;
					color: #C61515;
				}
			}
			
		}
		.number{
			padding: 0 34rpx;
			&-title{
				font-size: 28rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 40rpx;
			}
			&-cont{
				margin-top: 30rpx;
				padding-bottom: 16rpx;
				&-title{
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				&-des{
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
				}
				border-bottom: 1rpx solid #f8f8f8;
			}
		}
		.pay-number{
			padding: 0 34rpx;
			margin-top: 52rpx;
			&-cont{
				padding-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 34rpx;
				border-bottom: 1rpx solid #f8f8f8;
			}
			&-des{
				margin-top: 22rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
				line-height: 36rpx;
				padding-bottom: 60rpx;
				border-bottom: 1rpx solid #f8f8f8;
			}
		}
		.pay-type{
			display: flex;
			margin-top: 28rpx;
			&-1, &-2 {
				width: 50%;
				height: 80rpx;
				display: flex;
				font-size: 24rpx;
				background: #F5F7FA;
				align-items: center;
				justify-content: center;
				color: #292A40;
				font-weight: 600;
				border-radius: 8rpx;
				.u-icon {
					margin: -8rpx 8rpx 0 0;
				}
			}
			&-1 {
				&:nth-child(1) {
					margin-right: 20rpx;
				}
			}
			.active {
				background: #468EFF;
				color: #fff;
			}
			&-item{
				padding: 28rpx 28rpx 28rpx 42rpx;
				border-bottom: 1rpx solid #f8f8f8;
				&-left{
					image{
						width: 56rpx;
						height: 56rpx;
					}
					&-info{
						margin-left: 18rpx;
						&-title{
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}
						&-des{
							font-size: 24rpx;
							font-weight: 400;
							color: #A0A0A0;
							line-height: 34rpx;
						}
					}
				}
			}
		}
		.pay-type {
			&-item {
				padding: 28rpx 28rpx 28rpx 42rpx;
				border-bottom: 1rpx solid #f8f8f8;
		
				&-left {
					image {
						width: 56rpx;
						height: 56rpx;
					}
		
					&-info {
						margin-left: 18rpx;
		
						&-title {
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}
		
						&-des {
							font-size: 24rpx;
							font-weight: 400;
							color: #A0A0A0;
							line-height: 34rpx;
						}
					}
				}
			}
		}
		.notice{
			padding: 32rpx 36rpx;
			background: #fff;
			&-title{
				font-size: 32rpx;
				font-weight: 600;
				color: #16172F;
				line-height: 40rpx;
			}
			&-des{
				font-size: 24rpx;
				color: #8C93AA;
				line-height: 34rpx;
				margin-top: 18rpx;
			}
		}
		.pay{
			
			&-nav{
				padding: 28rpx 26rpx 48rpx 26rpx;
				box-sizing: border-box;
				width: 100%;
				height: 214rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				background: #FFF;
				box-shadow: 
				0px 4rpx 4rpx 4rpx rgba(219, 219, 219, 0.5), 
				0px 4rpx 4rpx 4rpx rgba(219, 219, 219, 0.5);
				&-pact{
					display: flex;
					flex-wrap: wrap;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;
					
					text {
						font-size: 20rpx;
						// color: #5F7EA3;
					}
				}
				.footer {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					&-price {
						display: flex;
						align-items: center;
						font-size: 48rpx;
						.rmb {
							font-size: 24rpx;
						}
					}
					.u-button {
						width: 268rpx;
						height: 64rpx;
					}
				}
				button{
					display: flex;
					justify-content: space-around;
					
					height: 80rpx;
					// background-color: #000;
					// margin-top: 26rpx;
					font-size: 32rpx;
					// font-weight: 600;
					border-radius: 34rpx;
					color: #16172F;
					border: 1rpx solid #979797;
					// color: #fff;
				}
			}
		}
		.draw-lots-main-popup{
			padding: 48rpx 38rpx;
			background: #1E2020;
			border-radius: 30rpx 30rpx 0px 0px;
			.header{
				&-title{
					font-size: 32rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 44rpx;
				}
				&-close{
					
				}
			}
			.draw-lots-list{
				margin-top: 20rpx;
				height: 50vh;
				overflow-y: auto;
				.pay-pact{
					font-size: 24rpx;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;
				}
			}
			button{
				height: 80rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #4E422C;
				background-color: #F2E0BC;
				line-height: 80rpx;
			}
		}
		.agreement_title {
			color: #A0A0A0;
		}
		.transaction{
			width: calc(100vw - 60rpx);
			height: 358rpx;
			&-text{
				margin-top: 60rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292A40;
			}
			&-input{
				display: flex;
				justify-content: center;
			    margin-top: 48rpx;
			}
			&-tips{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777E90;
				margin-left: 100rpx;
				margin-top: 36rpx;
			}
		}
	}
</style>
